<template>
  <!-- 门诊消费详情 -->
  <div>
    <div class="u4088_home">
      <div class="u4088"></div>
      <div class="home_text">订单详情</div>
    </div>
    <div class="topper">
      <div class="nav">
        <p>患者信息</p>
      </div>
      <div class="message">
        <div class="left">
          <p>
            <span>患者姓名</span>
            <span>{{ data.hurtname }}</span>
          </p>
          <p>
            <span>证件类型</span>
            <span>身份证号</span>
          </p>
          <p>
            <span>微信昵称</span>
            <span>{{ data.wechatname }}</span>
          </p>
          <p style="width: 500px;">
            <span>就诊人地址</span>
            <span>{{ data.address }}</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>就诊卡号</span>
            <span>{{ data.jiuzhengcard }}</span>
          </p>
          <p>
            <span>证件号码</span>
            <span>{{ data.sfz }}</span>
          </p>
          <p>
            <span>手机号码</span>
            <span>{{ data.tel }}</span>
          </p>
        </div>
        <div class="right">
          <p>
            <span>患者头像</span>
            <span class="tx"></span>
          </p>
          <p>
            <span>关系</span>
            <span>本人</span>
          </p>
        </div>
      </div>
    </div>
    <div class="topper biaoge">
      <div class="nav">
        <p>就诊信息</p>
      </div>
      <div class="message">
        <div class="left">
          <p>
            <span>就诊医院</span>
            <span>北医三院</span>
          </p>
          <p>
            <span>就诊医生</span>
            <span>{{ data.jzdoctor }}</span>
          </p>
          <p>
            <span>费用类型</span>
            <span>{{ data.moneytype }}</span>
          </p>
          <p>
            <span>费用明细</span>
          </p>

        </div>
        <div class="middle">
          <p>
            <span>医院地址</span>
            <span>九堡家苑</span>
          </p>
          <p>
            <span>医生职称</span>
            <span>{{ data.doctorlv }}</span>
          </p>
        </div>
        <div class="right right_xk">
          <p>
            <span>就诊科室</span>
            <span>{{ data.jzks }}</span>
          </p>
          <p>
            <span>业务类型</span>
            <span>本人</span>
          </p>
        </div>
      </div>
      <el-table :data="tabelData" border style="width: 68%">
        <el-table-column prop="nth" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="yname" label="项目名称">
        </el-table-column>
        <el-table-column prop="dangjia" label="单价（元）">
        </el-table-column>
        <el-table-column prop="num" label="数量">
        </el-table-column>
        <el-table-column label="小计（元）">
          <template slot-scope="scope">
            {{ (scope.row.num * scope.row.dangjia).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="nav">
        <p>订单信息</p>
      </div>
      <div class="message">
        <div class="left">
          <p>
            <span>订单总额</span>
            <span>{{ data.allmoney }}</span>
          </p>
          <p>
            <span>订单状态</span>
            <span>{{ data.paystate }}</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>支付方式</span>
            <span>{{ data.payways }}</span>
          </p>
          <p>
            <span>订单编号</span>
            <span>{{ data.ordercard }}</span>
          </p>
        </div>
        <div class="right btm-right">
          <p>
            <span>卡内余额</span>
            <span>{{ data.cardmoney }}</span>
          </p>
          <p>
            <span>取消时间</span>
            <span>{{ data.caozuotimes }}</span>
          </p>
        </div>

      </div>
      <p class="ipt">
        <span>挂号备注</span>
        <input type="text" placeholder="请输入内容" />
      </p>
      <section>
        <el-button style="width:'60px'" type="primary">保存</el-button>
        <el-button type="primary" plain>取消</el-button>
      </section>
    </div>
  </div>
</template>
<script>
import { payDetail, feiyonmx } from '@/api/payMoney'
export default {
  data() {
    return {

      tabelData: [],
      data: {}
    }
  },
  methods: {
  },
  mounted() {
    payDetail({ proid: this.$route.query.proid }).then(res => {
      this.data = res.data[0]
    })
    feiyonmx().then(res => {
      this.tabelData = res.data
    })
  },
}
</script>
<style scoped>
.u4088_home {
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
  width: 1316px;
}

.u4088 {
  background-color: rgba(0, 110, 255, 1);
  border-radius: 4px;
  width: 24px;
  height: 8px;
}

.home_text {
  width: 144px;
  font-size: 24px;
  margin-left: 20px;
}

.el-table--border[data-v-774bcf09] {
  height: 290px;
}

.el-button--primary {
  padding: 12px 40px;
}

.topper {
  width: 1280px;
  height: 290px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  border-radius: 8px;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: rgba(242, 242, 242, 1);
  display: flex;
  align-items: center;
}

.nav p {
  color: #006eff;
  font-size: 16px;
  text-indent: 1rem;
}

.message {
  display: flex;
}

.left {
  padding-left: 40px;
  width: 305px;
  padding-right: 100px;
}

.left span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.middle {
  padding-right: 100px;
}

.middle span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.right {
  padding-top: 30px;
}

.right span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.tx {
  width: 64px;
  height: 64px;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  box-sizing: border-box;
  border-radius: 50%;
}

.right p:nth-of-type(1) {
  display: flex;
}

span:nth-of-type(1) {
  color: #aaaaaa;
  width: 95px;
}

.bottom {
  width: 1280px;
  height: 515px;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  border-radius: 8px;
}

.btm-right {
  padding: 0;
}

.ipt span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 50px;
}

.ipt input {
  width: 510px;
  height: 39px;
  border: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-indent: 1rem;
}

section {
  padding: 30px 0 0 144px;
}

.biaoge {
  height: 594px;
}

.el-table--border {
  width: 783px;
  height: 200px;
  margin-left: 50px;
}

.right_xk {
  padding-top: 0;
}
</style>